<template>
<!--  项目情况-->
  <div>
    <div style="font-weight: 800;">呼和浩特市"三北"工程六期总任务：228.4万亩</div>
    <div id="chartStatus" style="width: 100%;height:400px;"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "projectStatus",
  data(){
    return{
      chartStatus: undefined,
      data:[
        {value: 71.58, name: '已完成',},
        {value: 156.83, name: '未完成',}]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods:{
    initChart(){
      const ctx = document.getElementById('chartStatus')
      this.chartStatus = echarts.init(ctx)
      const option = {
        title: {
          text: '',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c} ({d}%)"
        },
        color:['#9bd08c','green'],
        legend: {
          bottom: 10,
          left: 'center',
          data: ['已完成', '未完成']
        },
        series: [{
          type: 'pie',
          radius: '65%',
          center: ['50%', '50%'],
          selectedMode: 'single',
          data: this.data,
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      };
      this.chartStatus.setOption(option)
    }
  }
}
</script>

<style scoped>

</style>
